<template>
  <div>
    <div class="seach-new-box dis-flex">
      <el-button type="primary" size="small" icon="el-icon-plus" @click="modify(true)">新增仓库</el-button>
      <el-input v-model="seach.storage_name" placeholder="仓库名称" size="small">
        <el-button slot="append" icon="el-icon-search" type="primary" size="small" @click="searchBox('search')" />
      </el-input>
    </div>
    <div class="dis-flex flex-wrap">
      <div v-for="(item, index) in listStorage" :key="index" class="storage">
        <div class="storage-top dis-flex flex-y-center flex-x-between">
          <div class="dis-flex flex-y-center">
            <svg-icon icon-class="kucun" class="kucun" />
            <label v-if="storage_id !== item.id" class="name">{{ item.storage_name }}</label>
            <el-input v-else v-model="item.storage_name" size="small" placeholder="输入名称" />
          </div>
          <el-link type="primary" :underline="false" @click="jump(item.storage_sn)">仓位管理</el-link>
        </div>
        <div class="storage-details f-12">
          <div class="storage-details-card">
            <label class="storage_sn">仓库编码</label>
            <label class="f-13">{{ item.storage_sn }}</label>
          </div>
          <div class="storage-details-card dis-flex ">
            <label class="storage_sn storage_ph">仓库联系</label>
            <div class="flex-box">
              <div class="dis-flex storage_uid">
                <el-select v-model="item.uid" placeholder="请选择" clearable filterable size="small" :disabled="storage_id === item.id?false:true">
                  <el-option v-for="items in listRole" :key="items.id" :label="items.real_name" :value="items.id" />
                </el-select>
                <el-input v-model="item.phone" class="ml-10" size="small" placeholder="输入手机号码" :disabled="storage_id === item.id?false:true" />
              </div>
              <div class="dis-flex storage_uid">
                <el-input v-model="item.address" size="small" placeholder="输入地址" :disabled="storage_id === item.id?false:true" />
              </div>
              <div class="operation">
                <el-button type="primary" size="mini" @click="determine(item)">保存</el-button>
                <el-button type="info" plain size="mini" @click="storage_id = item.id">编辑</el-button>
                <el-link type="danger" :underline="false" @click="delValue(item.id)"><i class="el-icon-delete" />删除</el-link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 新增 -->
      <div v-if="dialogAdminVisible" class="storage">
        <div class="storage-details f-12">
          <div class="storage-details-card dis-flex flex-y-center">
            <label class="storage_sn"><i class="required">*</i>仓库名称</label>
            <div class="flex-box storage_name">
              <el-input v-model="param.storage_name" size="small" placeholder="输入仓库名称" />
            </div>
          </div>
          <div class="storage-details-card dis-flex ">
            <label class="storage_sn storage_ph"><i class="required">*</i>仓库联系</label>
            <div class="flex-box">
              <div class="dis-flex storage_uid">
                <el-select v-model="param.uid" placeholder="请选择" clearable filterable size="small">
                  <el-option v-for="items in listRole" :key="items.id" :label="items.real_name" :value="items.id" />
                </el-select>
                <el-input v-model="param.phone" class="ml-10" size="small" placeholder="输入手机号码" />
              </div>
              <div class="dis-flex storage_uid">
                <el-input v-model="param.address" size="small" placeholder="输入地址" />
              </div>
              <div class="storage_operation">
                <el-button type="primary" size="mini" @click="determine()">保存</el-button>
                <el-link type="danger" :underline="false" @click="modify(false)"><i class="el-icon-delete" />删除</el-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import { Storage } from '@/api/storage/storage'
import { deleteValue } from '@/utils/public'
import { Admin } from '@/api/system/admin'
export default {
  name: 'StorageList',
  data() {
    return {
      storage_id: '',
      seach: {},
      listStorage: [],
      dialogAdminVisible: false,
      param: {},
      listRole: [],
      selectId: []
    }
  },
  created() {
    this.getList()
    Admin.pageAdmin().then((res) => {
      this.listRole = res.data.data
    }).catch(() => {})
  },
  methods: {
    searchBox(val) {
      if (val === 'reset') {
        this.seach = {}
      }
      this.getList()
    },
    // 选择
    selectionChange(selection) {
      this.selectId = selection.map(val => val.id)
    },
    // 编辑/新增
    modify(flag) {
      this.param = {}
      this.dialogAdminVisible = flag
    },
    // 跳转到仓位管理
    jump(storage_sn) {
      this.$router.push({
        path: '/warehouse/positionList',
        query: {
          storage_sn,
          custom: new Date().getTime()
        }
      })
    },
    // 删除
    delValue(id) {
      deleteValue({
        _this: this,
        message: '<h3>确定要删除此仓库吗？</h3><p>仓库删除请慎重操作！</p>',
        customClass: 'custom',
        success: (res) => {
          Storage.delStorage({ id }).then((res) => {
            this.$message.success('删除成功')
            this.getList()
          }).catch(() => {})
        }
      })
    },
    delBatch() {
      this.delValue(this.selectId.join(','))
    },
    getList() {
      Storage.listStorage(this.seach).then((res) => {
        this.storage_id = ''
        this.listStorage = res.data
      }).catch(() => {})
    },
    determine(item) {
      this.param = item || this.param
      let storekeeper = ''
      if (this.param.uid) {
        storekeeper = this.listRole.find(value => value.id === this.param.uid).real_name
      }
      Storage.addStorage({ ...this.param, ...{ storekeeper }}).then((res) => {
        this.$message.success('保存成功')
        this.dialogAdminVisible = false
        this.getList()
      }).catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
// 搜索
.seach-new-box{
  background: white;
  margin:0 10px 10px;
  padding: 10px;
  .el-input{
    width: 400px;
    margin-left: 10px;
  }
}
.storage{
  width: 32.6%;
  height: 300px;
  background: white;
  margin-left: 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  &-top{
    height: 49px;
    border-bottom: 1px solid #E9E9E9;
    padding: 0 20px 0 10px;
    .kucun{
      font-size: 25px;
    }
    .name{
      font-size: 16px;
      font-weight: 600;
    }

  }
  &-details{
    &-card{
      margin-top: 20px;
      .storage_sn{
        font-size: 12px;
        color: #666666;
        margin: 0px 20px ;
        display: inline-block;
        min-width: 60px;
        text-align: center;
        }
        .f-13{
          font-size: 13px;
        }
        .storage_ph{
          margin-top: 10px;
        }
        .flex-box{
          flex: 1;
        }
        .storage_uid{
          margin-right: 20px;
          margin-bottom: 20px;
          .ml-10{
            margin-left: 10px;
          }
        }
        .operation{
          margin-top: 60px;
        }
        // 新增
        .storage_name{
          margin-right: 20px;
        }
        .storage_operation{
          margin-top: 90px;
        }
    }
  }
}
</style>
